<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>#(SEO_TITLE ?? WEB_TITLE ?? '未设置') - 相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta name="keywords" content="#(SEO_KEYWORD ??) 相册">
    <meta name="description" content="#(SEO_DESC ??) 相册">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="Shortcut Icon" href="#option('WEB_LOGO','/static/public/images/favicon.ico')" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/pages/photos/css/index.css">
    <script src="/static/admin/pages/photos/js/laysize.js"></script>
</head>
<body>
<div class="header">
    <ul>
        <li class="header-item web-name">
            <a href="/">>#(WEB_TITLE ?? '未设置')</a>
        </li>
        <li class="header-item">
            <a href="/">博客</a>
        </li>
        <li class="header-item">
            <a href="/photos">相册</a>
        </li>
    </ul>
</div>
<div class="layui-container">
    <div class="layui-row">
        #photosPage(pageSize=18)
        #for(photos: photosPage.data)
        <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2 photos-box">
            <a class="photos" href="/photos/#(photos.id)">
                #if(photos.isEncryption == 1)
                <img src="/static/admin/pages/photos/img/loading.gif" class="lazyload coverImg"
                     data-src="/static-plugin/photos/static/img/protected.jpg">
                #else
                <img src="/static/admin/pages/photos/img/loading.gif" class="lazyload coverImg"
                     data-src="/static-plugin/photos#(photos.coverUrl??)">
                #end
                <div class="photos-mask">
                    <div class="photos-mask-num">
                        <i class="layui-icon layui-icon-picture"></i>
                    </div>
                    <div class="photos-msg">
                        #if(photos.isEncryption == 1)
                        <h2 class="photos-mask-title"> 此内容被密码保护</h2>
                        #else
                        <h2 class="photos-mask-title"> #(photos.name??)</h2>
                        <p class="photos-mask-desc">#(photos.desc??)</p>
                        #end
                    </div>
                </div>
            </a>
        </div>
        #else
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="no-content">这里什么都没有~</div>
        </div>
        #end
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
            #pageRender(photosPage, preText="上一页",nextText="下一页")
        </div>

        #end
    </div>
</div>

<div class="footer">
            <span class="m-footer-left">
                #option('WEB_COPYRIGHT', 'Copyright dolphin')
            </span>
    <span class="m-footer-right">
                Powered by <a href="https://www.wubaobaotools.cn" target="_blank">dolphinBlog</a>
            </span>
</div>
</body>
<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script>
    $('.photos').mouseover(function () {
        $(this).children(".photos-mask").addClass("show-mask");
    });
    $('.photos').mouseout(function () {
        $(this).children(".photos-mask").removeClass("show-mask");
    });
</script>
</body>
</html>
